<template>
  <div>
    <h1>App</h1>
    shopStore.title: {{ shopStore.title }}<br>
    shopStore.count: {{ shopStore.count }}
    <button @click="shopStore.count++">+</button>
    <br>
    shopStore.g1: {{ shopStore.g1 }}<br>
    shopStore.add: {{ shopStore.add() }}<br>
    <hr>
    title: {{ title }}<br>
    count: {{ count }} <button @click="count++">count</button> <br>
    g1: {{ g1 }}<br>
    cartStore.add: {{ cartStore.add() }}<br>


    <ul>
      <li>
        <RouterLink to="/home">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop">Shop</RouterLink>
      </li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useCartStore, useShopStore } from './store';
const cartStore = useCartStore();
const { title, g1, count } = storeToRefs(cartStore);
const shopStore = useShopStore();

console.log(title.value);
</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>